<template>
    <div class="content">
        <div class="main">
            <div class="top">
                <img class="cover" src="@/static/images/coupon/cover.png" />
                <p class="title">美团、大众点评自助验券</p>
            </div>
            <u--form ref="uForm" labelPosition="left" labelWidth="0" :model="form" :rules="rules">
                <u-form-item prop="shopName" @click="geHallList">
                    <u--input
                        v-model="form.name"
                        border="surround"
                        placeholder="请选择门店"
                        :suffixIcon="!studyhallId ? 'arrow-right' : ''"
                        readonly
                        suffixIconStyle="color: #909399;font-size:24rpx;"
                    ></u--input>
                </u-form-item>
                <div class="form-item">
                    <u-form-item prop="code">
                        <u--input
                            size="mini"
                            v-model="form.code"
                            border="surround"
                            placeholder="请输入卡券兑换码"
                        ></u--input>
                    </u-form-item>
                </div>
            </u--form>
            <div class="btn-group">
                <u-button
                    color="#5428EC"
                    size="normal"
                    text="兑换"
                    :customStyle="{ width: '100%' }"
                    @click="exchange"
                ></u-button>
                <u-button
                    color="#5428EC"
                    size="normal"
                    plain
                    text="关闭"
                    :customStyle="{ width: '100%', marginTop: '20rpx' }"
                    @click="close"
                ></u-button>
            </div>
        </div>

        <u-popup :show="isShowRoom" closeable :round="24" @close="isShowRoom = false">
            <div class="room-popup">
                <div class="title">
                    <img class="icon" src="@/static/images/common/home.png" />
                    选择门店
                </div>
                <div class="room-list">
                    <div class="room-item" v-for="item in hallList" :key="item.id">
                        <div class="left">
                            <p class="name">{{ item.name }}</p>
                            <p class="address">{{ item.address }}</p>
                        </div>
                        <div class="right" @click="selectHall(item)">选择</div>
                    </div>
                </div>
            </div>
        </u-popup>
    </div>
</template>

<script>
export default {
    name: 'convert',
    data() {
        return {
            studyhallId: null,
            form: {
                studyhallId: null,
                name: '',
                code: '',
            },
            rules: {
                name: {
                    type: 'string',
                    required: true,
                    message: '请选择门店',
                    trigger: ['blur', 'change'],
                },
                code: [
                    {
                        type: 'string',
                        required: true,
                        message: '请输入卡券兑换码',
                        trigger: ['blur', 'change'],
                    },
                    {
                        validator: (rule, value) => {
                            let code = (value || '').replace(/\s+/g, '');
                            return uni.$u.test.number(code);
                        },
                        message: '请输入有效数字',
                        trigger: ['blur', 'change'],
                    },
                ],
            },
            isShowRoom: false,
            hallList: [],
        };
    },
    onLoad(options) {
        this.studyhallId = Number(options.id);
        this.form.studyhallId = Number(options.id);
        this.form.name = options.name;
    },
    onReady() {
        this.$refs.uForm.setRules(this.rules);
    },
    methods: {
        geHallList() {
            if (this.studyhallId) {
                return false;
            }
            this.$Api.study.hall.list().then(res => {
                this.hallList = res;
                this.isShowRoom = true;
            });
        },
        selectHall(item) {
            this.form.studyhallId = item.id;
            this.form.name = item.name;
            this.isShowRoom = false;
        },
        async exchange() {
            const validate = await this.$refs.uForm.validate();
            if (validate) {
                this.$Api.trade.order
                    .couponConsume({
                        ...this.form,
                        code: this.form.code.replace(/\s+/g, ''),
                    })
                    .then(() => {
                        this.form.code = '';
                        uni.showToast({
                            title: '兑换成功',
                            icon: 'none',
                        });
                    });
            }
        },
        close() {
            uni.navigateBack();
        },
    },
};
</script>

<style lang="scss" scoped>
.content {
    width: 100%;
    height: 100vh;
    background: #fff;
    .main {
        width: 100%;
        padding: 48rpx 30rpx;
        box-sizing: border-box;
        .top {
            @include flexBox(flex-start, center, column);
            .cover {
                width: 268rpx;
                height: 152rpx;
            }
            .title {
                font-size: 32rpx;
                font-weight: 600;
                color: #2f2f2f;
                margin-top: 24rpx;
                margin-bottom: 16rpx;
            }
        }
        .btn-group {
            width: 100%;
            margin-top: 34rpx;
        }
    }
    .room-popup {
        padding: 26rpx 30rpx;
        .title {
            font-size: 28rpx;
            font-weight: 600;
            color: #2f2f2f;
            padding-bottom: 12rpx;
            border-bottom: 1rpx solid #f1f1f1;
            @include flexBox(flex-start, center);
            .icon {
                width: 32rpx;
                height: 32rpx;
                margin-right: 20rpx;
            }
        }
        .room-list {
            min-height: 54vh;
            max-height: 66vh;
            overflow-y: auto;
            .room-item {
                padding: 26rpx 0;
                @include flexBox(space-between, flex-start);
                .left {
                    .name {
                        font-size: 28rpx;
                        font-weight: 600;
                        color: #2f2f2f;
                        margin-bottom: 8rpx;
                    }
                    .address {
                        font-size: 24rpx;
                        color: #898989;
                    }
                }
                .right {
                    padding: 10rpx 14rpx;
                    font-size: 24rpx;
                    font-weight: 600;
                    color: #ffffff;
                    background: #5428ec;
                    border-radius: 50rpx;
                }
            }
        }
    }
}
::v-deep .u-form {
    .u-form-item__body {
        padding: 4rpx 0;
        border: 1rpx solid #d4d4d4;
        border-radius: 8rpx;
        margin-top: 20rpx;
    }
    .u-form-item__body__right__message {
        text-align: left;
        margin-top: 10rpx;
    }
}
</style>
